<template>
  <div id="app">
    <el-card style="margin: 20px 0">
      <!-- 三级联动 -->
      <level3 @getId="getId" :addAttr="!scene == 0"></level3>
    </el-card>
    <el-card>
      <!-- spu列表 -->
      <div v-show="scene == 0">
        <el-button
          icon="el-icon-plus"
          type="primary"
          :disabled="!id.item3Id"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table :data="records">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="spu名称" prop="spuName"></el-table-column>
          <el-table-column label="spu描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <TitleBut
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
              ></TitleBut>
              <TitleBut
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click.native="editSPU(row)"
              ></TitleBut>
              <TitleBut
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku列表"
              ></TitleBut>
              <TitleBut
                type="danger"
                icon="el-icon-delete"
                size="mini"
                title="删除sku"
              ></TitleBut>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- 分页功能 
        当前第几页、数据总条数、每一页展示条数，连续页码数
        :current-page：代表第几页
        total:一共有多少条
        page-size:一页显示多少条数据
         page-sizes:代表每一页可以展示多少条数据
         layout：分页器的布局
         pager-count:按钮数量
        @size-change="handleSizeChange" 这个是切换一页显示第三条
        @current-change="handleCurrentChange" 这个是第几页
        -->
        <el-pagination
          style="text-align: center"
          :current-page="current"
          :page-sizes="[3, 5, 10]"
          :page-size="pageNum"
          layout="prev, pager, next, jumper,->,total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="getList"
        ></el-pagination>
      </div>
      <!-- 添加/修改spu -->
      <addSPU v-show="scene == 1" ref="spu" @fanhui="editscene"></addSPU>

      <!-- 添加sku -->

      <addSKU v-show="scene == 2"></addSKU>
    </el-card>
  </div>
</template>

<script>
// 三级列表
import level3 from "@/components/Level/level3.vue";
// 封装的鼠标悬浮提示组件
import TitleBut from "@/components/TitleBut.vue";
// 引入添加sku和spu的组件
import addSKU from "./addSKU.vue";
import addSPU from "./addSPU.vue";
// api接口
import { getSpuList } from "@/api/product/spu";
export default {
  name: "Spu",
  components: {
    level3,
    TitleBut,
    addSKU,
    addSPU,
  },
  data() {
    return {
      id: {}, //存放三级联动传来的id
      total: 0, //一共多少条数据
      pageNum: 3, //一页显示第三条数据
      current: 1, //第几页
      records: [], //存放table数据
      scene: 0, //0代表spu列表 1代表添加spu/修改spu 2代表添加sku
    };
  },
  methods: {
    // 获取三级联动传来的id
    async getId(id) {
      console.log(id);
      this.id = { ...id };
      //   把三级ID给到添加属性上;
      //   this.AttrinfoList.categoryId = id.item3Id;
      this.getList();
    },
    // 获取数据列表

    async getList(page = 1) {
      // 这个是分页切换的时候进行一个请求
      this.current = page;
      // 获取数据列表
      let { current, pageNum, id } = this;
      let res = await getSpuList(current, pageNum, id.item3Id);
      console.log(res);
      if (res.code == 200) {
        this.records = res.data.records;
        this.total = res.data.total;
      }
    },
    // 分页一页显示多少条
    handleSizeChange(size) {
      //   console.log(size);
      this.pageNum = size;
      this.getList();
    },
    // 点击修改的时候 我们需要发送请求 但是这个是子组件 我们需要通过ref获取到子组件的实列
    // 然后来触发子组件的事件
    editSPU(row) {
      this.scene = 1;
      // console.log(this.$refs.spu);
      this.$refs.spu.initSpu(row);
    },
    // 取消修改
    editscene({ num, flag }) {
      this.scene = num;
      console.log(num, flag);
      if (flag == "修改") {
        this.getList(this.current);
      } else {
        this.getList();
      }
    },
    addSpu() {
      this.scene = 1;
      //  把三级id传给添加
      this.$refs.spu.addSpu(this.id.item3Id);
    },
  },
};
</script>
